* {
    margin: 0;
    padding: 0;

   }

     .box {
          margin: 50px auto;
          width: 500px;
          height: 583px;
          border: 1px solid black;
     }

      .box .bar {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: 100%;
          height: 80px;
          border-bottom: 1px solid black;
        
      }

      .box .bar .bar1 {
        margin-top: 2px;
        display: flex;
        justify-content: space-around;
      }

      .box .bar .bar1 span {
         width: 30px;
         height: 30px;
         
      }

      .bar1 .black {
        background: black;
       }
     
       .bar1 .red {
          background: red;
      }

      .bar1 .orange {
        background: orange;
       }
     
       .bar1 .yellow{
          background: yellow;
      }
      .bar1 .green {
        background: green;
       }
     
       .bar1 .blue{
          background: blue;
      }
      .box .bar .bar2 {
        display: flex;
        justify-content: space-around;
      }
    /* #canvas {
        border:  1px solid red;
        color: white;
        
    } */

    .color-Text {
        font-size: 20px;
    }